<script setup>
import { defineProps } from "vue";
const props = defineProps(["filterPet"]);
console.log(props.filterPet);
</script>
<template>
  <el-descriptions direction="vertical" :column="3" border>
    <el-descriptions-item label="商品名称">{{ filterPet.name }}</el-descriptions-item>
    <el-descriptions-item label="商品分类">{{ filterPet.category }}</el-descriptions-item>
    <el-descriptions-item label="商品品牌" :span="2">{{
      filterPet.brand
    }}</el-descriptions-item>
    <el-descriptions-item label="商品类别">
      {{ filterPet.coos }}
    </el-descriptions-item>
    <el-descriptions-item label="商品价格">{{ filterPet.price }}</el-descriptions-item>
    <el-descriptions-item label="库存数量">{{
      filterPet.availability
    }}</el-descriptions-item>
    <el-descriptions-item label="商品重量">{{ filterPet.goods }}</el-descriptions-item>

    <el-descriptions-item label="商品产地">{{ filterPet.site }}</el-descriptions-item>
    <el-descriptions-item label="商品描述">
      {{ filterPet.description }}
    </el-descriptions-item>
    <el-descriptions-item label="联系电话">
      <el-tag size="small">{{ filterPet.phone }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="图片">
      <img :src="`http://localhost:3000/${filterPet.avatarName}`" />
    </el-descriptions-item>
  </el-descriptions>
</template>
<style scoped>
img {
  width: 180rem !important;
  height: 180rem !important;
  object-fit: cover;
}
.el-descriptions__cell {
  max-width: 200rem;
}
</style>
